<template>
  <view class="goods" @tap="gotoDetail">
    <view class="goods__image">
      <image :src="image.transformImage(good.pic, '375')" mode="aspectFill" class="goods__image--img" :lazy-load="true">
      </image>
    </view>
    <view class="goods__infoBox">
      <view class="goods__infoBox--name">{{good.name}}</view>
      <view class="goods__infoBox__info">
        <view class="goods--specification">
          <view class="goods--specification--actPrice">
            ￥{{good.actPrice!=='0.00' ? good.actPrice : good.price}}
          </view>
          <view class="goods--specification--price" v-if="good.actPrice!=='0.00'">
            ￥{{good.price}}
          </view>
        </view>
        <view class="goods__infoBox__bottom" v-if="good.status!=2">立即购买</view>
        <view class="goods__infoBox__noBottom" v-else>已售罄</view>
        <view v-if="good.status===2" class="soldOut">
          <view>已售罄</view>
          <view>SoldOut</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script module="image" lang="wxs" src="@/wxs/image.wxs"></script>
<script lang='ts'>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'

  @Component
  export default class ActGoods extends Vue {
    @Prop()
    good: object
    gotoDetail() {
      const id = this.$props.good.id;
      // const acc = (this.data as any).good;
      // const activityBeginTime =
      //   acc.assembleActivity && acc.assembleActivity.activityBeginTime
      //     ? acc.assembleActivity.activityBeginTime
      //     : "";
      // const activityEndTime =
      //   acc.assembleActivity && acc.assembleActivity.activityEndTime
      //     ? acc.assembleActivity.activityEndTime
      //     : "";
      // const activityId =
      //   acc.assembleActivity && acc.assembleActivity.id
      //     ? acc.assembleActivity.id
      //     : "";
      uni.navigateTo({
        // url: "/pages/detail/detail?id=" + (this.data as any).good.id,
        url: `/subcontract/pages/detail/detail?id=${id}&img=${this.$props.good.pic}`,
      });
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/var";

  .goods {
    padding: 10rpx 14rpx;
    position: relative;
    background-color: #f2f2f2;
  }

  .goods .goods__image {
    width: 100%;
  }

  .goods .goods__image--img {
    height: 280rpx;
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
  }

  .goods .goods__infoBox {
    background-color: white;
    border-radius: 0 0 20rpx 20rpx;
    padding: 40rpx 30rpx;
    margin-top: -12rpx;
  }

  .goods .goods__infoBox .goods__infoBox--name {
    font-size: 28rpx;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods .goods__infoBox__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
  }

  .goods .goods__infoBox__info .goods--specification {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 20rpx;
  }

  .goods .goods__infoBox__info .goods--specification--actPrice {
    font-size: 36rpx;
    color: #dd3c2b;
    font-weight: bold;
  }

  .goods .goods__infoBox__info .goods--specification--price {
    text-decoration: line-through;
    color: #bbbbbb;
    font-size: 24rpx;
    margin-left: 16rpx;
  }

  .goods .goods__infoBox__info .goods__infoBox__bottom {
    width: 160rpx;
    height: 60rpx;
    background-color: #dd3c2b;
    color: white;
    border-radius: 40rpx;
    font-size: 26rpx;
    margin-top: 20rpx;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
  }

  .goods .goods__infoBox__info .goods__infoBox__noBottom {
    width: 160rpx;
    height: 60rpx;
    background-color: #e5e5e5;
    color: white;
    border-radius: 20rpx;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
  }

  .soldOut {
    color: white;
    font-size: 26rpx;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    padding: 50rpx;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 50rpx;
    left: 35%;
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border: 4rpx solid white;
  }
</style>